import React from 'react';
import { Col, Row, message, Tooltip } from 'antd';
import CommonListsIndex from '../../../components/CommonLists/index';
import FilterTool from '../../../components/FilterTool';
import WarnRecordList from './warnRecordList';
import services from '../../../services/api';

class warnRecord extends CommonListsIndex {
  constructor(props) {
    super(props);
    this.listsComponent = WarnRecordList;
    this.defaultParams = { monitor_id: props.id };
    this.queryParams = this.defaultParams;
  }
  componentDidMount() {}

  refreshFilter = (params, type) => {
    this.queryParams = { ...this.defaultParams, ...params };
    // if (params.between_start_create_time)
    //   params.between_start_create_time =
    //     params.between_start_create_time.split(' ')[0] + '-' + params.between_start_create_time.split(' ')[1];
    // if (params.between_end_create_time)
    //   params.between_end_create_time =
    //     params.between_end_create_time.split(' ')[0] + '-' + params.between_end_create_time.split(' ')[1];
    if (type === false) return
    this.freshQueryList(params);
  };

  queryList = async (params) => {
    const { code, data, msg } = await services.riskMonitor.warnList(params);
    if (code) return message.error(msg);
    this.setState((prevState) => ({ ...prevState, ...data }));
  };

  getColumns = () => {
    return [
      {
        title: '发送时间',
        key: 'create_time',
        dataIndex: 'create_time',
        render: (text) => (
          <Tooltip title={text} placement='topLeft'>
            <div className='overflowtext'>{text}</div>
          </Tooltip>
        ),
      },
      {
        title: (
          <>
            {this.props.data_report_send_type &&
              this.getFilterTitle('发送方式', this.props.data_report_send_type, 'send_type', this.refreshTableFilter, [
                'key',
                'value',
              ])}
          </>
        ),
        dataIndex: 'send_type',
        key: 'send_type',
        render: (text) => {
          const send_type = this.props.data_report_send_type.find((item) => item.key === text).value;
          return (
            <Tooltip title={send_type} placement='topLeft'>
              <div className='overflowtext'>{send_type}</div>
            </Tooltip>
          );
        },
      },
      {
        title: '接收人',
        key: 'name',
        dataIndex: 'name',
        render: (text) => (
          <Tooltip title={text} placement='topLeft'>
            <div className='overflowtext'>{text}</div>
          </Tooltip>
        ),
      },
      {
        title: (
          <>
            {this.getFilterTitle(
              '发送状态',
              [
                {
                  value: 1,
                  name: '成功',
                },
                {
                  value: 2,
                  name: '失败',
                },
              ],
              'status',
              this.refreshTableFilter,
              ['value', 'name']
            )}
          </>
        ),
        dataIndex: 'status',
        render: (text) => {
          const status = text === 1 ? '成功' : text === 2 ? <span style={{ color: '#f74c21' }}>失败</span> : '';
          return (
            <Tooltip title={status} placement='topLeft'>
              <div className='overflowtext'>{status}</div>
            </Tooltip>
          );
        },
      },
      {
        title: '失败原因',
        key: 'fail_reason',
        dataIndex: 'fail_reason',
        render: (text) => (
          <Tooltip title={text} placement='topLeft'>
            <div className='overflowtext'>{text}</div>
          </Tooltip>
        ),
      },
    ];
  };

  render() {
    const ListsComponent = this.listsComponent;
    const data = [
      {
        type: 'rangepicker',
        key: 'start',
        name: ['between_start_create_time', 'between_end_create_time'],
        placeholder: ['开始时间', '结束时间'],
        disabledDate: (current) => false,
      },
      {
        type: 'Search',
        key: 'keyword',
        name: 'keyword',
        defaultValue: '',
        placeholder: '请输入接收人进行搜索',
      },
    ];
    return (
      <div>
        <Row type='flex' justify='end' align='middle'>
          <Col span={24}>
            <FilterTool
              ref='filterTool'
              data={data}
              colNum={1}
              query={this.freshQueryList}
              refreshFilter={this.refreshFilter}
              refresh={this.resetList}
              isOnChange={true}
              justify='end'
            />
          </Col>
        </Row>
        <div className='inner-content' style={{ marginTop: '10px' }}>
          <ListsComponent
            {...this.state}
            rowKey={(_, index) => index}
            columns={this.getColumns()}
            queryList={this.freshQueryList}
            onChangePagination={this.onChangePagination}
          />
        </div>
      </div>
    );
  }
}
export default warnRecord;
